.title{
    font-size: 14px;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    height:100%;
}
.title-sub{
    width: 75%;
    padding-left: 5px;
    height: 100%;
    display: flex;
    align-items: center;
}
.iconBase{
    flex: 1;
    height: 100%;
    position: relative;

}
.classIcon{
    width: 100%;
    height: 100%;
}
.classIcon .classArrow{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.classIcon{
    transition: 0.5s;
}
.arrow{
    border-top: 8px solid #0c8990;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    width: 10px;
    height: 0;
}
.rotate{
    transform: rotate(180deg);
}
.context{
    background-color: rgba(12,137,144,.6);
    margin-top: 4px;
    padding: 0;
    position: absolute;
    width: 100%;
    cursor: pointer;
    border-radius: 3px;
    overflow: auto;
    max-height: 200px;
    z-index: 1000;
}
.context li{
    text-align: left;
    width: 100%;
    cursor: pointer;
    list-style-type: none;
    padding: 0 5px;
    font-size: 13px;
}
.context li:hover{
    background: rgba(12,137,144,.8);
}
.box-height{
    height: 30px;
    line-height: 30px;
}
.class1{
    background: rgba(12,137,144,.6);
    border-left: 3px solid #0c8990;
    position: relative;
    cursor: pointer;
 }
 .class1 >.context{
     width: calc(100% + 3px);
     margin-left: -3px;
 }
 .classIcon1{
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 .classIcon1-line{
     width: 14px;
     height: 2px;
     background-color: #0c8990;
     margin-bottom: 2px;
 }
 .classIcon1-arrow{
     border-top: 7px solid #0c8990;
     border-left: 7px solid transparent;
     border-right: 7px solid transparent;
     width: 0;
 }
 .class2{
    border: 2px solid rgba(12,88,92,.6);
    border-left: 0;
    background-image: linear-gradient(to right,rgba(12,88,92,.6) 40%,transparent 10%);
    background-size: 8px 30px;
    position: relative;
    cursor: pointer;
    background-color: rgba(12,88,92,.4);
 }
 .class3{
    position: relative;
    cursor: pointer;
    border: 2px solid #0d4d51;
 }
 .classIcon3{
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 .classIcon3Arrow{
     height: 2px;
     background-color: #048d8e;
     display: block;
     margin-bottom: 1px;
 }
 .class3Titlesub{
     background-color: rgba(12,88,92,.6); 
 } 

 .class4{
    position: relative;
    cursor: pointer;
    border: 1px solid #0b5659;
 }
 .class4Titlesub{
    background-color: rgba(12,88,92,.6); 
} 

.class5,.class7,.class8,.class9,.class10,.class11,.class12,.class13,.class14,.class15,.class16,.class17,.class18,.class19,.class20{
    position: relative;
    cursor: pointer;
 }
.class5Titlesub{
    background-color: rgba(12,88,92,.6); 
    border: 1px solid #0d4d51;
}
.class5Icon{
    border: 1px solid #0d4d51;
    background-color: rgba(12,88,92,.6); 
    margin-left: 5px;
    width: 40px;
}

.class6{
    position: relative;
    cursor: pointer;
    border-bottom: 1px solid #0b5659;
    border-top:1px solid  #098990;
    background-color: rgba(12,88,92,.4); 
 }
 .class6-decorate-top-left,.class6-decorate-top-right{
     position: absolute;
     width: 8px;
     height: 1px;
     top: -1px;
     background-color: #06b9c3;
 }
 .class6-decorate-top-right{
     right: 0;
 }
 .class7-title-decorate-left,.class7-title-decorate-right,.class7-icon-decorate-left,.class7-icon-decorate-right{
     position: absolute;
     display: flex;
     flex-direction: row;
     align-items: center;
 }
 .class7-title-decorate-left,.class7-icon-decorate-left{
    left: 0;
    top: 0;
 }
 .class7-icon-decorate-left{
     top: -1px;
 }
 .class7-title-decorate-line,.class7-icon-decorate-line{
     height: 1px;
     width: 8px;
     background-color: #01b9ba;
 }
 .class7-title-decorate-dot,.class7-icon-decorate-dot{
    height: 1px;
    width: 1px;
    background-color: #e8e774;
    margin-left: 1px;
}
.class7-title-decorate-right{
    bottom: 0px;
    right: 33%;
}
.class7-title-decorate-right>.class7-title-decorate-dot,.class7-icon-decorate-right>.class7-icon-decorate-dot{
    margin:0;
    margin-right: 1px;
}
.class7-icon-decorate-right{
    right: 0;
}
.class8{
    background-color: rgba(12,137,144,.4);
}
.class8-svg{
    position: absolute;
}
.class8-svg1{
    left: -3px;
    top: -3px;
}
.class8-svg2{
    right:-3px;
    top: -3px;
    transform: rotate(90deg);
}

.class8-svg3{
    left: -3px;
    bottom: -3px;
    transform: rotate(-90deg);
}
.class8-svg4{
    right:-3px;
    bottom: -3px;
    transform: rotate(180deg);
}
.class9{
    background: url("./img/class9-bg.png") no-repeat;
    background-size: 100% 100%;
}
.class9 .title-sub{
    padding-left: 30px;
    box-sizing: border-box;
}
.class9 .iconBase{
    margin-right: 30px !important;
}
.class9-circle1,.class9-circle2{
    position: absolute;
    display: block;
    width: 5px;
    height: 5px;
    background-color: #0d656a;
    border-radius: 50%;
}
.class9-circle1{
    left:15px;
}
.class9-circle2{
    right: 16px;
}
.class10{
    border: 1px solid #1b4d52;
    background-color: rgba(12,88,92,.4)
}
.class10-decorate-line-left{
    height: 95%;
    width: 1px;
    background-color: #087e85;
    left: -5px;
    top: -1px;
    position: absolute;
}
.class10-decorate-line-top{
    height: 1px;
    width: 96%;
    background-color: #087e85;
    left:0;
    top: -5px;
    position: absolute;
}
.class10-decorate-circle-left-top{
    width: 3px;
    height: 3px;
    background-color: #03eaf6;
    left:-6px;
    top: -6px;
    position: absolute;
}
.class10-decorate-circle-left-bottom{
    width: 3px;
    height: 3px;
    background-color: #03eaf6;
    left:-6px;
    bottom:-2px;
    position: absolute;
}
.class10-decorate-circle-right{
    width: 3px;
    height: 3px;
    background-color: #03eaf6;
    top: -6px;
    right: 0px;
    position: absolute;
}
.class11Titlesub{
    border: 1px solid #087e85;
    border-right: 0;
}
.class11Icon{
    background-color: rgba(12,88,92,.4);
    border: 1px solid #1b5d64;
}
.class11-icon-decorate-rect1,
.class11-icon-decorate-rect2,
.class11-icon-decorate-rect3,
.class11-icon-decorate-rect4,
.class11-title-decorate-rect1,
.class11-title-decorate-rect2{
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: #04d4e0;
    border-radius: 50%;
}
.class11-icon-decorate-rect1,
.class11-icon-decorate-rect2{
    top: -2px;
}
.class11-icon-decorate-rect1,.class11-icon-decorate-rect3{
    left: -2px;
}
.class11-icon-decorate-rect3,
.class11-icon-decorate-rect4{
    bottom: -2px;
}
.class11-icon-decorate-rect2,.class11-icon-decorate-rect4{
    right: -2px;
}
.class11-title-decorate-rect1,
.class11-title-decorate-rect2{
    left: -2px;
}
.class11-title-decorate-rect1{
    top: -2px;
}
.class11-title-decorate-rect2{
    bottom: -2px;
}
.class12{
    border: 1px solid #0c7177;
    border-top-color:#0d4145;
    border-bottom-color:#0d4145;
    border-top-style: dashed;
    border-bottom-style: dashed;
    background-color: rgba(12,88,92,.4);
}
.class13{
    border: 1px dashed #0c7177;
    border-radius: 5px;
    background-color: rgba(12,88,92,.4);
}
.class14{
    background:url(./img/class14-bg.png) no-repeat;
    background-size: 100% 100%;
}
.class15{
    display: flex;
    justify-content: center;
}
.class15>.title{
    border: 1px solid #0d7379;
    width: 95%;
    background-color: rgba(27, 93, 100, 0.4);
} 
.class15-left-line,.class15-right-line{ 
    height: 108%;
    width: 2px;
    background-color: #0d7379;
    position: absolute;
}
.class15-left-line{
    left: -5px;
}
.class15-right-line{
    right: -5px;
}
.class15>.context{
    margin-top: 33px;
}
.class16{
    border: 1px solid #194f55;
    padding: 2px;
    box-sizing: border-box;
}
.class16 .title-sub{
   background-color: #0c585c;
}
.class16 .iconBase{
    background-color: rgba(12,88,92,.6);
    margin-left: 3px;
}
.class16-rect-1,.class16-rect-2,.class16-rect-3,.class16-rect-4{
    position: absolute;
    display: block;
    width: 4px;
    height: 4px;
    background-color: #039293;
}
.class16-rect-1,.class16-rect-3{
    top: -3px;
}
.class16-rect-2,.class16-rect-4{
    bottom: -3px;
}
.class16-rect-1,.class16-rect-2{
    left: -3px;
}
.class16-rect-3,.class16-rect-4{
    right: -3px;
}


.class17{
    border: 2px solid #0d6b71;
    background-color: rgba(12,88,92,.4);
}

.class17-rect-1,.class17-rect-2,.class17-rect-3{
    position: absolute;
    display: block;
    width: 8px;
    height: 2px;
    background-color: #9a8637;
    border-right: 3px solid #000;
}
.class17-rect-1,.class17-rect-3{
    top: -2px;
    left:20px;
}
.class17-rect-3{
    left: 70%;
}
.class17-rect-2{
    bottom: -2px;
    left: 50px;
}

.class18{
    border: 1px solid #0d6b71;
    background: rgba(12,88,92,.4);
}
.class18-decorate{
    position: absolute;
    width: 110%;
    height: 120%;
    margin-left: -6px;
}

.class19>.title{
    width: 100%;
    height: 100%;
    /* clip-path: polygon(5% 20%,5% 0,95% 0,95% 20%,100% 20%,100% 80%,95% 80%,95% 100%,5% 100%,5% 80%,0 80%,0 20%); */
    background-color: rgba(12,88,92,.4);
    border:1px dashed#0f5c61;
    clip-path: polygon(5% 20%,5% 0,95% 0,95% 20%,100% 20%,100% 80%,95% 80%,95% 100%,5% 100%,5% 80%,0 80%,0 20%);
}
.class19-decorate-1,.class19-decorate-2,.class19-decorate-3,.class19-decorate-4{
    width: 5px;
    height: 5px;
    border:1px solid #0d4d52;
    position: absolute;
    z-index: 1;
}
.class19-decorate-1,.class19-decorate-3{
    top: 0;
}
.class19-decorate-2,.class19-decorate-4{
    bottom: 0;
}
.class19-decorate-1,.class19-decorate-2{
    left: 0;
}
.class19-decorate-3,.class19-decorate-4{
    right: 0;
}

.class20>.title{
    width: 100%;
    height: 100%;
    /* clip-path: polygon(5% 20%,5% 0,95% 0,95% 20%,100% 20%,100% 80%,95% 80%,95% 100%,5% 100%,5% 80%,0 80%,0 20%); */
    background-color: rgba(12,88,92,.4);
    border:1px solid#0f5c61;
    clip-path: polygon(5% 20%,5% 0,95% 0,95% 20%,100% 20%,100% 80%,95% 80%,95% 100%,5% 100%,5% 80%,0 80%,0 20%);
}
.class20-decorate-1,.class20-decorate-2,.class20-decorate-3,.class20-decorate-4{
    width: 5px;
    height: 5px;
    border:1px solid #0d4d52;
    position: absolute;
    z-index: 1;
}
.class20-decorate-1,.class20-decorate-3{
    top: 0;
}
.class20-decorate-2,.class20-decorate-4{
    bottom: 0;
}
.class20-decorate-1,.class20-decorate-2{
    left: 0;
}
.class20-decorate-3,.class20-decorate-4{
    right: 0;
}